<template>
  <div class="layoutCon">
    <div class="breadcrumb">
      <router-link class="home" to="/"></router-link> > <router-link to="/my">마이페이지</router-link> > 코칭서비스관리
    </div>
    <div class="layoutMy">
      <user-center-nav></user-center-nav>
      <div class="myCon">
        <div class="comList">
          <div class="tit">
            <h2>코칭서비스관리</h2>
            <p>※ 프로세스 : <span class="red">신청대기</span> → <span class="orange">임시저장</span> → <span class="green">신청완료</span> → <span class="blue">코칭완료</span></p>
          </div>
          <div class="loadList" v-loading="pageConfig.loading&&pageConfig.page==1">
            <ul v-if="list.length">
              <li v-for="(item,index) in list" :key="index">
                <div class="time">
                  <em v-if="item.edit_status==0" class="red">신청대기</em>
                  <em v-if="item.edit_status==1" class="orange">임시저장</em>
                  <em v-if="item.edit_status==2" class="green">신청완료</em>
                  <em v-if="item.edit_status==3">코칭완료</em>
                  {{item.created_at}}
                </div>
                <a href="javascript:;" target="_self" class="txt">
                  <strong>{{item.title}}</strong>({{item.subtitle}})
                </a>
                <el-button v-if="item.edit_status==0||item.edit_status==1" type="primary" class="r" @click="openInfo(item.edit_status,item.id,item.service_type)">신청서 작성하기</el-button>
                <el-button v-if="item.edit_status==2" class="r btn" @click="openInfo(item.edit_status,item.id,item.service_type)">신청서 조회</el-button>
                <el-button v-if="item.edit_status==3" class="r btn" @click="openInfo(item.edit_status,item.id,item.service_type)">결과보기</el-button>
              </li>
            </ul>
            <div class="notData" v-if="!pageConfig.loading&&list.length==0">데이터 없음</div>
          </div>
          <div class="loadMore" v-if="!pageConfig.isAll">
            <el-button type="primary" :loading="pageConfig.loading" @click="loadMore" class="btnMore">더보기</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { myService } from '@/api';
import userCenterNav from '@/components/userCenterNav'

export default {
  name:'',
  components:{userCenterNav},
  props:[],
  data(){
    return {
      pageConfig:{
        page:1,
        per:10,
        loading:false,
        isAll:true
      },
      list:[]
    }
  },
  computed:{},
  created(){
    this.getList();
  },
  mounted(){},
  methods:{
    async getList(){
      this.pageConfig.loading=true;
      let res = await myService({page:this.pageConfig.page,per:this.pageConfig.per});
          if (res.code == 200) {
            this.pageConfig.page+=1;
            let _arry=res.data.data;
              if(_arry.length){
                _arry.forEach((o)=>{
                  o.isOpen=false;
                })
                this.list=this.list.concat(_arry);
              }
            !res.data.next_page_url?(this.pageConfig.isAll=true):(this.pageConfig.isAll=false);
            this.pageConfig.loading=false;            
          }else{
            this.pageConfig.loading=false;  
          }
    },
    loadMore(){
      !this.pageConfig.loading&&this.getList();
    },
    openInfo(type,id,type2){
      let _path='/my/coachForm';
          (type==2||type==3)&&(_path='/my/coachInfo')
      this.$router.push({path:_path,query:{id:id,type:type2}})
    }
  },
  watch:{}
}
</script>
<style lang="scss" scoped>
 @import "@/assets/styles/my.scss";
</style>